<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      style="
        width: 300px;
        height: 300px;
        border: solid 2px #333;
        overflow: auto;
      "
    >
      <main style="height: 1000px; background-color: red"></main>
    </div>
    <input type="checkbox" disabled /> 接受协议
    <script>
      document.querySelector("div").addEventListener("scroll", function () {
        //console.log(this.scrollTop);
        //console.log(this.clientHeight);
        //console.log(this.offsetHeight);
        //console.log(this.scrollHeight);

        console.log(this.getBoundingClientRect());
      });
    </script>
  </body>
</html>
